<script setup lang="ts"></script>

<template>
  <main class="main-wrap" v-hl>
    <div class="dev-wrap">
      <div class="doc-wrap">
        <div class="doc-sub">1.1 命名规范</div>
        <div class="doc-text">
          <div class="doc-sub">1.1.1 项目命名</div>
          <div class="text">全部采用小写方式， 以中划线分隔。</div>
          <div class="text">正例：mall-management-system</div>
          <div class="text">反例：mall_management-system / mallManagementSystem</div>
        </div>
        <div class="doc-text">
          <div class="doc-sub">1.1.2 目录命名</div>
          <div class="text">
            全部采用小写方式， 以中划线分隔，有复数结构时，要采用复数命名法， 缩写不用复数
          </div>
          <div class="text">
            正例： scripts / styles / components / images / utils / layouts / demo-styles /
            demo-scripts / img / doc
          </div>
          <div class="text">反例： script / style / demo_scripts / demoStyles / imgs / docs</div>
        </div>
        <div class="doc-text">
          <div class="doc-sub">1.1.3 JS、CSS、SCSS、HTML、PNG 文件命名</div>
          <div class="text">全部采用小写方式， 以中划线分隔</div>
          <div class="text">正例： render-dom.js / signup.css / index.html / company-logo.png</div>
          <div class="text">反例： renderDom.js / UserManagement.html</div>
        </div>
        <div class="doc-text">
          <div class="doc-sub">1.1.4 命名严谨性</div>
          <div class="text">
            代码中的命名严禁使用拼音与英文混合的方式，更不允许直接使用中文的方式。
            说明：正确的英文拼写和语法可以让阅读者易于理解，避免歧义。注意，即使纯拼音命名方式也要避免采用
          </div>
          <div class="text">正例：henan / luoyang / rmb 等国际通用的名称，可视同英文。</div>
          <div class="text">
            反例：DaZhePromotion [打折] / getPingfenByName() [评分] / int 某变量 = 3
          </div>
        </div>
        <div class="doc-text">
          <div class="doc-sub">1.1.5 杜绝完全不规范的缩写，避免望文不知义：</div>
          <div class="text">
            反例：AbstractClass“缩写”命名成 AbsClass；condition“缩写”命名成
            condi，此类随意缩写严重降低了代码的可阅读性。
          </div>
        </div>
      </div>
      <div class="doc-wrap">
        <div class="doc-sub">1.2 CSS 规范</div>
        <div class="doc-text">
          <div class="doc-sub">1.2.1 命名</div>
          <div class="text">1、类名使用小写字母，以中划线分隔</div>
          <div class="text">2、id 采用驼峰式命名</div>
          <div class="text">3、scss 中的变量、函数、混合、placeholder 采用驼峰式命名</div>
        </div>
        <div class="doc-text">
          <div class="doc-sub">1.2.2 选择器</div>
          <div class="text">1、css 选择器中避免使用标签名</div>
          <div class="text">
            2、推荐使用直接子选择器，尽量少使用后代选择器
            <div class="text">不推荐</div>
            <pre><code class="css">.content .title {
  font-size: 2rem;
}</code></pre>
            <div class="text">推荐</div>
            <pre><code class="css">.content > .title {
  font-size: 2rem;
}</code></pre>
          </div>
        </div>
        <div class="doc-text">
          <div class="doc-sub">1.2.3 尽量使用缩写属性</div>
          <div class="text">
            <div class="text">不推荐</div>
            <pre><code class="css">border-top-style: none;
font-family: palatino, georgia, serif;
font-size: 100%;
line-height: 1.6;
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;</code></pre>
            <div class="text">推荐</div>
            <pre><code class="css">border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;</code></pre>
          </div>
        </div>
        <div class="doc-text">
          <div class="doc-sub">1.2.4 省略0后面的单位</div>
          <div class="text">
            <div class="text">不推荐</div>
            <pre><code class="css">div {
  padding-bottom: 0px;
  margin: 0em;
}</code></pre>
            <div class="text">推荐</div>
            <pre><code class="css">div {
  padding-bottom: 0;
  margin: 0;
}</code></pre>
          </div>
        </div>
        <div class="doc-text">
          <div class="doc-sub">1.2.5 避免使用ID选择器及全局标签选择器防止污染全局样式</div>
          <div class="text">
            <div class="text">不推荐</div>
            <pre><code class="css">#header {
  padding-bottom: 0px;
  margin: 0em;
}</code></pre>
            <div class="text">推荐</div>
            <pre><code class="css">.header {
  padding-bottom: 0px;
  margin: 0em;
}</code></pre>
          </div>
        </div>
      </div>
      <div class="doc-wrap">
        <div class="doc-sub">1.3 SCSS 规范</div>
        <div class="doc-text">
          <div class="doc-sub">1.3.1 文件位置</div>
          <div class="text">1、将公共scss文件放置在style/scss/common文件夹</div>
          <div class="text">例:// color.less,common.less</div>
          <div class="text">2、按以下顺序组织</div>
          <div class="text">@import;</div>
          <div class="text">变量声明;</div>
          <div class="text">样式声明;</div>
          <div class="text">
            <pre><code class="css">@import "mixins/size.scss";
$default-text-color: #333;
.page {
  width: 960px;
  margin: 0 auto;
}</code></pre>
          </div>
        </div>
        <div class="doc-text">
          <div class="doc-sub">1.3.2 避免嵌套层级过多</div>
          <div class="text">
            将嵌套深度限制在3级。对于超过4级的嵌套，给予重新评估。这可以避免出现过于详实的CSS选择器
          </div>
          <div class="text">
            避免大量的嵌套规则。当可读性受到影响时，将之打断。推荐避免出现多于20行的嵌套规则出现
          </div>
          <div class="text">
            <div class="text">不推荐</div>
            <pre><code class="css">.main{
  .title{
    .name{
       color:#fff
    }
  }
}</code></pre>
            <div class="text">推荐</div>
            <pre><code class="css">.main-title{
   .name{
      color:#fff
   }
}</code></pre>
          </div>
        </div>
      </div>
      <div class="doc-wrap">
        <div class="doc-sub">1.4 常见规范</div>
        <div class="doc-text">
          <div class="doc-sub">1.4.1 命名</div>
          <div class="text">
            1、采用小写驼峰命名
            lowerCamelCase，代码中的命名均不能以下划线，也不能以下划线或美元符号结束
          </div>
          <div class="text">反例： name / name / name$</div>
          <div class="text">
            2、方法名、参数名、成员变量、局部变量都统一使用 lowerCamelCase 风格，必须遵从驼峰形式
          </div>
          <div class="text">正例： localValue / getHttpMessage() / inputUserId</div>
          <div class="text">其中 method 方法命名必须是 动词 或者 动词+名词 形式</div>
          <div class="text">正例：saveShopCarData /openShopCarInfoDialog</div>
          <div class="text">反例：save / open / show / go</div>
          <div class="text">
            3、常量命名全部大写，单词间用下划线隔开，力求语义表达完整清楚，不要嫌名字长
          </div>
          <div class="text">正例： MAX_STOCK_COUNT</div>
          <div class="text">反例： MAX_COUNT</div>
        </div>
        <div class="doc-text">
          <div class="doc-sub">1.4.2 代码格式</div>
          <div class="text">1、使用 2 个空格进行缩进</div>
          <div class="text">
            2、不同逻辑、不同语义、不同业务的代码之间插入一个空行分隔开来以提升可读性。（说明：任何情形，没有必要插入多个空行进行隔开）
          </div>
        </div>
        <div class="doc-text">
          <div class="doc-sub">1.4.3 字符串</div>
          <div class="text">
            1、统一使用单引号(‘)，不使用双引号(“)。这在创建 HTML 字符串非常有好处：
          </div>
          <div class="text">
            <div class="text">不推荐</div>
            <pre><code class="js">let str = 'foo';
let testDiv = "<div id='test'></div>";</code></pre>
            <div class="text">推荐</div>
            <pre><code class="js">let str = 'foo';
let testDiv = '<div id="test"></div>';</code></pre>
          </div>
        </div>
        <div class="doc-text">
          <div class="doc-sub">1.4.4 对象声明</div>
          <div class="text">1、使用字面值创建对象</div>
          <div class="text">正例： let user = {};</div>
          <div class="text">反例： let user = new Object();</div>
          <div class="text">2、 使用字面量来代替对象构造器</div>
          <div class="text">
            <div class="text">不推荐</div>
            <pre><code class="js">var user = new Object();
user.age = 0;
user.name = 0;
user.city = 0;</code></pre>
            <div class="text">推荐</div>
            <pre><code class="js">var user = {
  age: 0,
  name: 1,
  city: 3
};</code></pre>
          </div>
        </div>
        <div class="doc-text">
          <div class="doc-sub">1.4.5 使用 ES6+语法</div>
          <div class="text">
            必须优先使用 ES6,7 中新增的语法糖和函数。这将简化你的程序，并让你的代码更加灵活和可复用
          </div>
        </div>
        <div class="doc-text">
          <div class="doc-sub">1.4.6 条件判断和循环最多三层</div>
          <div class="text">
            条件判断能使用三目运算符和逻辑运算符解决的，就不要使用条件判断，但是谨记不要写太长的三目运算符。如果超过
            3 层请抽成函数，并写清楚注释。
          </div>
        </div>
        <div class="doc-text">
          <div class="doc-sub">1.4.7 this 的转换命名</div>
          <div class="text">对上下文 this 的引用只能使用’self’来命名</div>
        </div>
        <div class="doc-text">
          <div class="doc-sub">1.4.8 慎用 console.log</div>
          <div class="text">
            因 console.log 大量使用会有性能问题，所以在非 webpack 项目中谨慎使用 log 功能
          </div>
        </div>
      </div>
    </div>
  </main>
</template>

<style scoped lang="scss">
.main-wrap {
  @include size(100%, 100%);
  padding: 24px;
  overflow-y: auto;
  background: #fff;
}
.dev-wrap {
  .dev-t1 {
    @include font(14px, 1.4, #333);
    font-weight: bold;
    margin-bottom: 15px;
  }
  .doc-wrap {
    padding-left: 5px;
    margin-bottom: 15px;
    &:last-of-type {
      margin-bottom: 0;
    }
    .doc-sub {
      @include font(13px, 1.4, #333);
      font-weight: bold;
      margin-bottom: 10px;
    }
    .doc-text {
      @include font(13px, 1.4, #333);
      padding-left: 5px;
      margin-bottom: 10px;
      &:last-of-type {
        margin-bottom: 0;
      }

      .text {
        @include font(13px, 1.4, #333);
        margin-bottom: 8px;
        padding-left: 5px;
        &:last-of-type {
          margin-bottom: 0;
        }
        .text {
          @include font(13px, 1.4, #333);
          margin: 12px 0 6px 0;
        }
        pre {
          display: block;
          margin: 0 0 4px 0;
          code {
            display: block;
            padding: 10px;
            background: #282c34;
            color: #abb2bf;
          }
        }
      }
    }
  }
}
</style>
